import React from 'react';
import { 
  List, 
  // Button, 
  message, 
  Tooltip 
} from 'antd';
import { FileTextOutlined } from '@ant-design/icons';

const flexStyle = {
  width: '50px',
  height: '30px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
}

const IconBox = () => {
  return <div style={flexStyle}>
          <FileTextOutlined style={{fontSize: 18, color: '#106ba3'}} />
         </div>
}
const ItemP = props => {
  return <p style={{
            width: 'calc(100% - 150px)', 
            textAlign: 'left', 
            paddingLeft: '20px', 
            margin: 0, 
            fontSize: '14px', 
            color: props.darkMode ? '#afb6bc' : '#666'
          }}>
          {props.desc ? props.title+`(${props.desc})` : props.title}
         </p>
}

function SeqList(props) {
  const delItem = (item) => {
    if (window.Avue) {
      window.Avue.v_deleteSeqFileListPost(item)
    } else {
      message.warning('本地删除无效')
    }
  }
  React.useEffect(() => {}, [props.seqFileArr])

  return(
    <div style={{background: props.darkMode ? '#30404d' : '#fafafa'}}>
      <List size="small"
        itemLayout="horizontal"
        dataSource={props.seqFileArr}
        renderItem={item => (
          <List.Item style={{
            padding: '2px 0', 
            background: props.darkMode ? '#30404d' : '#fff'
          }}>
            <Tooltip placement="topRight" title={item.title}>
              <div style={{
                width: '100%',
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
              }}>
                <IconBox />
                <ItemP {...item} darkMode={props.darkMode} />
                {
                  !item.template && item.currentDelete ? 
                  <button 
                    type="button"
                    class="bp3-button"
                    style={{ 
                      background: props.darkMode ? '#405464' : '#f5f8fa', 
                      color: props.darkMode ? '#f5f8fa' : '#555'
                    }}
                    onClick={() => delItem(item)}>
                    <span class="bp3-button-text">Remove</span>
                  </button>
                  : null
                }
              </div>
            </Tooltip>
          </List.Item>
      )}/>
    </div>
  )
}

export default SeqList;